<template>
  <view
    class="tab-container flex justify-start bg-white"
    :class="
      align === 'center'
        ? 'justify-center'
        : align === 'left'
        ? 'justify-start'
        : 'justify-end'
    "
  >
    <view
      v-for="(tab, index) in tabs"
      :key="tab.id"
      class="uni-tab-item"
      :id="tab.id"
      :data-current="index"
      @tap="ontabtap"
    >
      <text
        :class="
          tabIndex == index
            ? 'uni-tab-item-title uni-tab-item-title-active'
            : 'uni-tab-item-title'
        "
      >
        {{ tab.name }}
      </text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    align: {
      type: [String],
      default: 'left',
    },
    tabs: {
      type: [Array],
      default: () => {
        return [
          {
            id: 1,
            name: '追号中',
          },
          {
            id: 2,
            name: '已中出',
          },
          {
            id: 3,
            name: '已完成',
          },
        ]
      },
    },
    scroll: {
      type: [Boolean],
      default: false,
    },
  },
  data() {
    return {
      tabIndex: 0,
    }
  },
  methods: {
    ontabtap(e) {
      let index = e.target.dataset.current || e.currentTarget.dataset.current
      this.switchTab(index)
      this.$emit('ontap', e)
    },
    switchTab(index) {
      if (this.tabIndex === index) {
        return
      }
      this.tabIndex = index
    },
  },
}
</script>

<style lang="scss" scoped>
.tab-container {
  padding: 0 28upx;
  width: 100%;
  height: 80upx;
}

.uni-tab-item {
  display: inline-block;
  height: 80upx;
  line-height: 80upx;
  font-weight: 400;
  flex-wrap: nowrap;
  margin-left: 30upx;
  // margin-right: 30upx;

  &:first-child {
    margin-left: 0;
  }

  &:last-child {
    margin-right: 0;
  }
}

.uni-tab-item-title {
  height: 80upx;
  line-height: 80upx;
  font-size: 24upx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(113, 128, 138, 1);
  flex-wrap: nowrap;
}

.uni-tab-item-title-active {
  height: 80upx;
  line-height: 80upx;
  font-size: 32upx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(20, 158, 255, 1);
  flex-wrap: nowrap;
  position: relative;

  &::after {
    content: '';
    width: 28upx;
    height: 8upx;
    background-color: #149eff;
    position: absolute;
    bottom: -16upx;
    left: 50%;
    border-radius: 4upx;
    margin-left: -14upx;
  }
}
</style>
